import React, {useEffect, useState} from 'react';
import {Form, Button, InputNumber, Modal, Row, Col,message} from 'antd';
import {connect} from 'umi';
import {getPerformanceRatioById} from '../service';

const FormItem = Form.Item;
const formLayout = {
  labelCol: {span: 7},
};

const colStyle = {
  xl: 24,
  lg: 24,
  md: 24,
  sm: 24,
  xs: 24,
};


const ConfigForm = (props) => {

  const {onSubmit, onCancel, loading, visible,id} = props;
  const [form] = Form.useForm();
  const [sum,setSum] = useState(0);

  useEffect(() => {
    if (visible && id) {
      getPerformanceRatioById(id).then(res => {
        form.setFieldsValue(res);
      });
    }
  }, [visible]);


  const compute = async () => {
    const fieldsValue = await form.getFieldsValue();
    let temp = 0;
    Object.values(fieldsValue).forEach(item => {
      if(typeof item === 'number'){
        temp = temp += item;
      }
    });
    setSum(temp);
  };

  const onFormCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    if(sum !== 100){
      message.error(`占比率配置错误，当前占比为：` + sum + '%');
      return ;
    }
    onSubmit({...fieldsValue, id: id});
    form.resetFields();
  };

  const renderContent = () => {
    return (
      <>
        <Row gutter={24} justify='center' style={{ background: '#ffffff'}}>
          <Col {...colStyle} style={{display: 'flex'}}>
            <FormItem label="A占比：" style={{width: '80%'}} name='percentageA' validateFirst={true} rules={[{required: true, message: 'A占比不能为空！'}]}>
              <InputNumber style={{width: '100%'}} placeholder="请输入" max={100} min={0} onChange={compute}/>
            </FormItem>
            <FormItem>
              <span style={{padding: '10px', width: '20%'}}>%</span>
            </FormItem>
          </Col>
          <Col {...colStyle} style={{display: 'flex'}}>
            <FormItem label="B+占比：" style={{width: '80%'}} name='percentageBPlus'  validateFirst={true} rules={[{required: true, message: 'B+占比不能为空！'}]}>
              <InputNumber style={{width: '100%'}} placeholder="请输入" max={100} min={0} onChange={compute}/>
            </FormItem>
            <FormItem>
              <span style={{padding: '10px', width: '20%'}}>%</span>
            </FormItem>
          </Col>
          <Col {...colStyle} style={{display: 'flex'}}>
            <FormItem label="B占比：" style={{width: '80%'}} name='percentageB'  validateFirst={true} rules={[{required: true, message: 'B占比不能为空！'}]}>
              <InputNumber style={{width: '100%'}} placeholder="请输入" max={100} min={0} onChange={compute}/>
            </FormItem>
            <FormItem>
              <span style={{padding: '10px', width: '20%'}}>%</span>
            </FormItem>
          </Col>
          <Col {...colStyle} style={{display: 'flex'}}>
            <FormItem label="C占比：" style={{width: '80%'}} name='percentageC'  validateFirst={true} rules={[{required: true, message: 'C占比不能为空！'}]}>
              <InputNumber style={{width: '100%'}} placeholder="请输入" max={100} min={0} onChange={compute}/>
            </FormItem>
            <FormItem>
              <span style={{padding: '10px', width: '20%'}}>%</span>
            </FormItem>
          </Col>
          <Col {...colStyle} style={{display: 'flex'}}>
            <FormItem label="D占比：" style={{width: '80%'}} name='percentageD'  validateFirst={true} rules={[{required: true, message: 'D占比不能为空！'}]}>
              <InputNumber style={{width: '100%'}} placeholder="请输入" max={100} min={0} onChange={compute}/>
            </FormItem>
            <FormItem>
              <span style={{padding: '10px', width: '20%'}}>%</span>
            </FormItem>
          </Col>
          <Col {...colStyle} style={{display: 'flex'}}>
            <p style={{textAlign: 'center',width:'100%'}}>占比率必须等于100%，当前总占比 <span style={{color:'red'}}>{sum}</span> %</p>
          </Col>
        </Row>
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" onClick={() => handleSubmit()} loading={loading}>确定</Button>
      </>
    )
  };

  return (
    <Modal
      width='60%'
      title={id === 1 ? `单位占比率配置`:`个人占比率配置`}
      visible={visible}
      footer={renderFooter()}
      onCancel={() => onFormCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        style={{paddingTop: '24px'}}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
};

export default connect()(ConfigForm)
